<template>
    <!-- 地块信息 制作时间：2024-3-12 -->
    <div class="agriMonitoring">
      <!-- 搜索框 -->
      <div class="backFont"><el-button icon="el-icon-arrow-left" @click="back()">返回</el-button></div>
      <!-- 列表 -->
      <div class="tableList">
        <el-table
          class="list tableNewBox"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column label="种植品种">
            <template slot-scope="scope">
              <span>{{ scope.row.varietyName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="种植标准">
            <template slot-scope="scope">
              <span>{{ scope.row.plantingStandards === 1 ? '有机' : '无机' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="种植时间">
            <template slot-scope="scope">
              <span>
                {{ scope.row.createTime ? $moment(scope.row.createTime).format('YYYY-MM-DD') : '' }}
                {{ scope.row.endTime ? `-${$moment(scope.row.endTime).format('YYYY-MM-DD')}` : '' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="种植时长（天）">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产量（公斤）">
            <template slot-scope="scope">
              <span>{{ scope.row.harvestingQuantity }}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                class="greenButton"
                @click="openDetail(scope.row)"
                ><img class="btnImage" src="@/assets/images/look.png" />查看档案</el-button
              >
              <el-button
                size="mini"
                class="redButton"
                icon="el-icon-delete"
                type="text"
                @click="delBtn(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="params.current"
          :page-size="params.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>

<script>
import { getAgriculturalList, deleteAgricultural } from '@/api/agriLand'
export default {
  name: 'history',
  data () {
    return {
      params: {
        current: 1,
        pageSize: 10,
        state: 1
      },
      tableData: null,
      total: null,
      currentPage: 1
    }
  },
  mounted () {
    this.params.baseId = this.$route.query.baseId
    this.params.landId = this.$route.query.landId
    this.getList()
  },

  methods: {
    // 返回
    back () {
      this.$router.go(-1)
    },
    // 查询列表数据
    async getList () {
      const res = await getAgriculturalList(this.params)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    addLand (item) {
      this.$router.push({
        path: '/shuzhongtian/agriAreaAdd',
        query: {
          landId: item ? item.landId : null
        }
      })
    },
    // 删除按钮
    async delBtn (id) {
      this.$alert(
        'Tips：删除后该历史种植相关信息',
        '确定删除该历史种植吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'alertClass',
          showCancelButton: true,
          closeOnClickModal: false,
          showClose: false
        }).then(async () => {
        const res = await deleteAgricultural({ ids: id })
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.params.current = 1
          this.getList(this.params)
        } else {
          this.$message.error('删除失败')
        }
      })
        .catch(action => {
        })
    },
    // 查询
    search () {
      this.params.current = 1
      this.getLandInfoPage(this.params)
    },
    // 查看详情
    openDetail (landObj) {
      this.$router.push({
        path: '/shuzhongtian/dashboard/archives',
        query: {
          landId: landObj.landId,
          baseId: landObj.baseId,
          id: landObj.id
        }
      })
    },
    // 翻页
    handleCurrentChange (val) {
      this.params.current = val
      this.getList()
    }
  }
}
</script>

  <style lang="scss" scoped>
  .agriMonitoring {
    width: 100%;
    height: 100%;
    position: relative;
    // background-color: #fff;
    .searchBox {
      font-weight: 600;
      margin-bottom: 1.5vh;
      width: 100%;
      height: 11vh;
      line-height: 11vh;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      ::v-deep .el-select > .el-input {
        height: 3.5vw;
      }
      .searchInp {
        width: 16.4708vw;
        height: 0.75rem * 0.834;
        margin-right: 1vw;
      }
      .searchBtn {
        background-color: #6adfae;
        border: #80efb1;
        font-weight: 600;
        width: 5.8333vw;
        height: 3.125vw * 0.834;
      }
      .searchBtn:hover {
        background-color: #80efb1;
      }
    }
    .tableList {
      margin-top: 2vh;
      height: 68vh;
      overflow-y: auto;
      border-radius: 20px;
      background: #fff;
      padding:  0 0 1.0417vw 0;
      .addBtn {
        margin-bottom: 1.5625vw * 0.834;
      }
      .list {
        text-align: center;
      }
    }
    .pagination {
      margin-top: 1.5625vw *0.834;
      text-align: right;
      margin-right: 2vw
    }
  }
  </style>
